import React from 'react'
import { View, Image } from 'react-native'
import { Lt, Dialog, Cimage, Images, Label, Jpp, Touch, ImagePt, Jx, Color, Flist } from "../_utils"
import { Net, NET_NR } from "../_net"
import { eApp, cHome } from './_home';
import { ViewEprice, ViewGoodsContentForDetail, TouchGoodsHor } from './Goods';
import { GoodsBanner } from './GoodsBanner';
import { ViewScale } from '../_util';

// 商品详情页 加载列表（轮播图 商品描述 领券 店铺 详情图组 为您推荐）
export class Details extends React.PureComponent{
    constructor(props){
        super(props);

        this.maxpp = 6;

        this.onLoad = this.onLoad.bind(this);
        this.onItem = this.onItem.bind(this);
    }
    onLoad(params){
        const { data, details } = this.props;
        const dCount = details.length;
        const idx = params.page - this.maxpp;
        // 底下, 没有了
        if(idx > (dCount + 2)){
            params.add();
            return;
        }
        // 为您推荐
        if(idx > (dCount + 1)){
            let keyword = data.goodName;
            keyword = Jx.replaceChinese(keyword);
            console.log(keyword);
            keyword = keyword[parseInt(Math.random() * keyword.length)];
            console.log(keyword);
            const type = eApp.idxs[data.appIdx];
            let obj = {
                type,
                keyword,
                ...Flist.toPagination(0, params.maxpp),
            };
            if(data.fieldIdx){
                obj = { ...obj, ...cHome.getCatCid(type, data.fieldIdx) };
            }
            Net.request("Shop/Search", obj, {params, NET_NR}).then(r=>{
                if(r.data){
                    if(data.fieldIdx){
                        cHome.toFieldIdx(r.data.data, data.fieldIdx);
                    }
                    params.add(r.data.data);
                }else{
                    params.add();
                }
            })
        }
        // 详情图片组
        if(idx >= 0 && idx < dCount){
            params.add1(details[idx]);
            return;
        }
        // 轮播图/商品描述/领券/店铺
        if(idx < 0 || idx == dCount || idx == (dCount + 1)){
            params.add1(1);
            return;
        }
        params.add();
    }

    onItem(params){
        const index = params.index;
        const item = params.item;
        // console.log("Details:onItem()   " + index);
        const { data, images, onCoupon } = this.props;

        // 轮播图
        if(index == 0){
            return <GoodsBanner images={images}/>;
        }
        // 商品描述
        if(index == 1){
            return <ViewGoodsContentForDetail style={{margin:Lt.margin}} data = {data}/>
        }
        // 领券
        if(index == 2){
            const ipt = ImagePt.youhuiquan;
            // 高度1 触发onEndReached 这个困扰终于...开心不
            return (!data.zk_money) ? <View style={{height:1}}/> : 
            <ViewScale ipt = {ipt} style={{margin:Lt.margin, width:Jpp.width-Lt.margin*2}}> 
                <View style={{width:ipt.w, height:ipt.h, flexDirection:"row", justifyContent:"flex-end", alignItems:"center"}}>
                    <Image source={Images.youhuiquan} style={{position:"absolute"}}/>
                    <View style={{width:232, height:84, justifyContent:"center", alignItems:"center"}}>
                        <Label style={{fontSize:Lt.c16, color:"white"}}>
                            <Label style={{fontSize:32}}>{data.zk_money}</Label>
                            {"元优惠券"}
                        </Label>
                        {/* <Label style={{color:"#FFA2B8"}}>期限:{Jx.toDate(Jpp.dateTemp)}</Label>
                        <Label style={{color:"#FFA2B8"}}>至 {Jx.toDate(Jpp.dateTemp)}</Label> */}
                    </View>
                    <Touch onPress={onCoupon || null} style={{width:116, height:84}}/>
                </View>
            </ViewScale>
        }
        // 分割线
        if(index == 3 || index == 5){
            return <View style={{height:5, backgroundColor:Color.line}}/>
        }
        // 店铺
        if(index == 4){
            return <View style={{flexDirection:"row", alignItems:"center", margin:Lt.margin}}>
                <ViewEprice field={"店铺"}/>
                <Label style={{fontSize:Lt.c16, color:Color.c6, marginLeft:5}}>{data.shopName}</Label>
            </View>
        }
       
        let idx = index - this.maxpp;
        const { details } = this.props;
        const dCount = details.length;
        // 详情图片组
        if(idx >= 0 && idx < dCount){
            return (!item) ? null : 
            <Cimage uri={item} style={{width:Jpp.width-Lt.margin, height:Jpp.width, marginLeft:Lt.margin/2, marginVertical:1}}/>
        }
        // 分割线
        if(idx == dCount){
            return <View style={{height:5, backgroundColor:Color.line}}/>;
        }
        // 为您推荐
        if(idx == (dCount + 1)){
            return <View style={{flexDirection:"row", justifyContent:"center", alignItems:"center"}}>
                <View style={{width:60, height:1, backgroundColor:Color.c6}}/>
                <Label style={{fontSize:Lt.c18, color:Color.c6, margin:20}}>为您推荐</Label>
                <View style={{width:60, height:1, backgroundColor:Color.c6}}/>
            </View>
        }

        // 为您推荐 商品列表
        const newData = cHome.toData(item, data.appIdx);
        return <TouchGoodsHor wh = {145} data = {newData}/>
    }
    render(){
        return <Flist
            style={{flex:1}}
            onLoad = {this.onLoad}
            onItem = {this.onItem}
        />
    }
}